<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基础使用</title>
</head>

<body>
  <h1>axios基础使用</h1>
  <button id="btn">发送请求</button>
  <script>
    const oBtn = document.getElementById('btn');
    oBtn.onclick = async function () {
      try {
        /* 
          axios请求接受一个配置对象
          axios方法返回一个promise实例,成功的被re接受了,如果请求失败则进入catch异常处理中
        */
        const result = await axios({
          url: "/queryUser",
          method: "get",
          // headers: {},  // 请求头
          //即将与请求一起发送的url参数
          params: {
            userId: "001"
          },
          //请求体参数,只适用于post和put
          // data: {},
          // timeout: 10000,  // 请求超时时间
        })
        /* 
          axios成功的值这个对象属性解析:
            - config:是axios请求的时候传入的配置对象
            - data:后端响应的数据
            - headers:响应头
            - request:底层真正使用的xhr实例对象
            - status:响应状态码
            - statusText:响应状态描述
        */
        console.log(result);
        console.log(result.data);
      } catch (e) {
        console.log(e)
      }
    }
  </script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

</html>